<template>
    <div class="equipment">
        <div class="eq-title">
            <font-awesome-icon class="icon-tag icon" :icon="['fas', 'tag']" />
            <h3>新增资产</h3>
            <i class="close" @click="eqclose"> <font-awesome-icon class="icon-times" :icon="['fas', 'times']" /></i>
        </div>
        <div class="eq-content">
            <ul>
                <li>
                    资产编号：
                    <input type="text" class="form-control" autofocus ref="userName" v-model="member" />
                </li>
                <li>
                    资产类型：
                    <a-select v-model="type" style="color: #fff">
                        <a-select-option value="电脑">电脑</a-select-option>
                        <a-select-option value="办公桌">办公桌</a-select-option>
                        <a-select-option value="档案柜">档案柜</a-select-option>
                        <a-select-option value="保险柜">保险柜</a-select-option>
                        <a-select-option value="椅子">椅子</a-select-option>
                    </a-select>
                </li>
                <li>
                    价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
                    <input type="text" class="form-control" autofocus ref="userName" v-model="price" />
                </li>
                <li>
                    状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                    <a-select
                        v-model="status"
                        :style="{ color: status === '正常' ? '#66c59d' : '#ec808d' }"
                        @change="selectChange"
                    >
                        <a-select-option value="正常">正常</a-select-option>
                        <a-select-option value="异常">异常</a-select-option>
                    </a-select>
                </li>
                <li>
                    品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：
                    <input type="text" class="form-control" v-model="brand" />
                </li>
                <li>
                    朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：
                    <a-select v-model="direction" style="color: #fff">
                        <a-select-option value="东">东</a-select-option>
                        <a-select-option value="南">南</a-select-option>
                        <a-select-option value="西">西</a-select-option>
                        <a-select-option value="北">北</a-select-option>
                    </a-select>
                </li>
                <li>
                    管&nbsp;&nbsp;理&nbsp;&nbsp;人：
                    <input type="text" class="form-control" v-model="admin" />
                </li>
                <li>
                    使&nbsp;&nbsp;用&nbsp;&nbsp;人：
                    <input type="text" class="form-control" v-model="user" />
                </li>
                <li>
                    创建日期：
                    <a-date-picker @change="establish" :allowClear="false" suffix-icon="null" v-model="reportingTime" />
                </li>
                <li>
                    购买日期：
                    <a-date-picker @change="purchase" :allowClear="false" suffix-icon="null" v-model="purchaseTime" />
                </li>
                <li>
                    型号规格：
                    <input type="text" class="form-control" v-model="spec" />
                </li>
                <li>
                    资产位置：
                    <input type="text" class="form-control" v-model="position" />
                </li>
                <li>
                    当前位置：
                    <input type="text" class="form-control" v-model="aposition" />
                </li>

                <li>
                    备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：
                    <input type="text" class="form-control" v-model="remarks" />
                </li>
            </ul>
            <div class="eq-btn">
                <div @click="eqAdd()">
                    <a>确定</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '@/static/js/eventBus'
export default {
    data() {
        return {
            // newplaceholder: '正常',
            newisadd: this.isadd,
            newData: [],
            member: '', //资产编号
            type: '电脑', //资产类型
            status: '正常', //状态
            price: '', //价格
            position: '', //资产位置,例如：1楼101
            aposition: '', //当前位置,例如：1楼101
            floor: this.newFloor, //楼层,例如：一层，二层，三层
            direction: '南', //资产方向
            newlongitude: '', //经度
            newlatitude: '', //纬度
            user: '', //使用人
            admin: '', //管理人
            reportingTime: '2021-03-11', //上报时间
            purchaseTime: '2021-03-11', //购买时间
            brand: '', //品牌
            spec: '', //型号规格
            remarks: '', //备注
        }
    },
    props: {
        isadd: Boolean,
        getTimer: Function,
        newFloor:String,
    },
    methods: {
        wipeData() {
            this.member = '' //资产编号
            this.type = '电脑' //资产类型
            this.status = '正常' //状态
            this.price = '' //价格
            this.position = '' //资产位置,例如：1楼101
            this.aposition = '' //当前位置,例如：1楼101
            this.floor = this.newFloor //楼层,例如：一层，二层，三层
            this.direction = '南' //资产方向
            this.newlongitude = '' //经度
            this.newlatitude = '' //纬度
            this.user = '' //使用人
            this.admin = '' //管理人
            this.reportingTime = '2021-03-11' //上报时间
            this.purchaseTime = '2021-03-11' //购买时间
            this.brand = '' //品牌
            this.spec = '' //型号规格
            this.remarks = '' //备注
        },
        eqclose() {
            this.newisadd = false
            this.$emit('newisBtnAdd', this.newisadd)
            this.wipeData()
        },
        selectChange() {
            // console.log(111)
        },
        //创建时间
        establish(data, dateString) {
            this.reportingTime = dateString
        },
        //购买时间
        purchase(data, dateString) {
            this.purchaseTime = dateString
        },
        //新增按钮
        eqAdd() {
            if (this.status == '正常') {
                this.status = 1
            } else {
                this.status = 2
            }
            if (this.type == '电脑') {
                this.type = 1
            } else if (this.type == '办公桌') {
                this.type = 2
            } else if (this.type == '档案柜') {
                this.type = 3
            } else if (this.type == '保险柜') {
                this.type = 4
            } else if (this.type == '椅子') {
                this.type = 5
            }
            this.getTimer() //更新数量总数
            // this.newData = {
            //     id: this.id,
            //     member: this.member, //资产编号
            //     type: this.type, //资产类型
            //     status: this.status, //状态
            //     price: this.price, //价格
            //     position: this.position, //资产位置,例如：1楼101
            //     aposition: this.aposition, //当前位置,例如：1楼101
            //     floor: this.floor, //楼层,例如：一层，二层，三层
            //     direction: this.direction, //资产方向
            //     y: this.newlongitude, //经度
            //     x: this.newlatitude, //纬度
            //     user: this.user, //使用人
            //     admin: this.admin, //管理人
            //     reportingTime: this.reportingTime, //创建时间
            //     purchaseTime: this.purchaseTime, //购买时间
            //     brand: this.brand, //品牌
            //     spec: this.spec, //型号规格
            //     remarks: this.remarks, //备注
            // }
            this.newisadd = false
            this.$emit('newisBtnAdd', this.newisadd)
            this.axios
                .post('/assets/add', {
                    id: this.id,
                    member: this.member, //资产编号
                    type: this.type, //资产类型
                    status: this.status, //状态
                    price: this.price, //价格
                    position: this.position, //资产位置,例如：1楼101
                    aposition: this.aposition, //当前位置,例如：1楼101
                    floor: this.floor, //楼层,例如：一层，二层，三层
                    direction: this.direction, //资产方向
                    y: this.newlongitude, //经度
                    x: this.newlatitude, //纬度
                    user: this.user, //使用人
                    admin: this.admin, //管理人
                    reportingTime: this.reportingTime, //创建时间
                    purchaseTime: this.purchaseTime, //购买时间
                    brand: this.brand, //品牌
                    spec: this.spec, //型号规格
                    remarks: this.remarks, //备注
                })
                .then((res) => {
                    // console.log(res.result)
                    console.log(res)
                    if (res.result.status == 1) {
                        res.result.status = '正常'
                    } else {
                        res.result.status = '异常'
                    }
                    if (res.result.type == 1) {
                        res.result.type = '电脑'
                    } else if (res.result.type == 2) {
                        res.result.type = '办公桌'
                    } else if (res.result.type == 3) {
                        res.result.type = '档案柜'
                    } else if (res.result.type == 4) {
                        res.result.type = '保险柜'
                    } else if (res.result.type == 5) {
                        res.result.type = '椅子'
                    }
                    this.newData = {
                        id: res.result.id,
                        member: res.result.member, //资产编号
                        type: res.result.type, //资产类型
                        status: res.result.status, //状态
                        price: res.result.price, //价格
                        position: res.result.position, //资产位置,例如：1楼101
                        aposition: res.result.aposition, //当前位置,例如：1楼101
                        floor: res.result.floor, //楼层,例如：一层，二层，三层
                        direction: res.result.direction, //资产方向
                        y: res.result.y, //经度
                        x: res.result.x, //纬度
                        user: res.result.user, //使用人
                        admin: res.result.admin, //管理人
                        reportingTime: res.result.reportingTime, //创建时间
                        purchaseTime: res.result.purchaseTime, //购买时间
                        brand: res.result.brand, //品牌
                        spec: res.result.spec, //型号规格
                        remarks: res.result.remarks, //备注
                    }
                    this.$emit('newData', this.newData)
                    this.wipeData()
                    if (res.code == 200) {
                        bus.$emit('getnewData', this.newData)
                    }
                })
        },
    },
    mounted() {
        bus.$on('getLongitude', (data) => {
            this.newlongitude = data
        })
        bus.$on('getLatitude', (data) => {
            this.newlatitude = data
        })
    },
}
</script>

<style lang="less" scoped>
.equipment {
    width: 350px;
    // height: 220px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    z-index: 668;
    .eq-title {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        position: relative;
        background: rgba(242, 242, 242, 0.9);
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        .icon {
            font-size: 24px;
            margin-left: 20px;
            color: #999;
            // transform: rotate(135deg);
        }
        h3 {
            font-size: 16px;
            margin-left: 20px;
        }
        .close {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            font-size: 16px;
            color: #ddd3d3;
            text-align: center;
            cursor: pointer;
            background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
        }
    }
    .eq-content {
        width: 100%;
        // height: 200px;
        display: flex;
        flex-direction: column;
        // align-items: center;
        // justify-content: center;
        background: rgba(82, 102, 144, 0.8);
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        ul {
            display: flex;
            flex-wrap: wrap;
            padding: 0 30px;
            margin: 10px 0;
            li {
                width: 50%;
                height: 20px;
                font-size: 12px;
                line-height: 20px;
                color: #fff;
                display: flex;
                // justify-content: center;
                align-items: center;
                margin: 3px 0;
                // border: 1px solid red;
                .form-control {
                    width: 55%;
                    height: 20px;
                    background: transparent;
                    font-size: 12px;
                    border: none;
                    opacity: 0.8;
                    &:focus {
                        outline: none;
                    }
                }
                /deep/ .ant-calendar-picker {
                    position: relative;
                    width: 55%;
                    background: transparent;
                    border: none;
                    height: 20px;
                    padding: 0;
                    margin: 0;
                    // background: #ccc;
                    // border: 1px solid red;
                    div {
                        padding: 0;
                        margin: 0;
                        height: 100%;
                        line-height: 0;
                        // line-height: 10px;
                        input {
                            height: 20px;
                            padding: 0;
                            margin: 0;
                            color: #fff;
                            background: transparent;
                            border: none;
                            line-height: 0;
                            font-size: 12px;
                            border: none;
                            opacity: 0.8;
                        }
                        .ant-calendar-picker-icon {
                            display: none;
                            border: 1px solid red;
                        }
                    }
                }
                /deep/ .ant-select {
                    width: 50%;
                    height: 20px;
                    .ant-select-selection {
                        width: 100%;
                        height: 100%;
                        background: transparent;
                        border: none;
                        outline: none;
                        border-radius: 0;
                    }
                    .ant-select-selection__rendered {
                        padding: 0;
                        // margin: 0;
                        margin-left: 3px;
                        line-height: 0;
                        width: 100%;
                        height: 100%;
                        // border: 1px solid blue;
                        .ant-select-selection-selected-value {
                            padding: 9px 0 0 0;
                            margin: 0;
                            width: 100%;
                            height: 100%;
                            // line-height: 0;
                            font-size: 12px;
                            opacity: 0.8;
                            // border: 1px solid blue;
                        }
                    }
                    .ant-select-arrow {
                        color: #fff;
                    }
                }
            }
        }
        .eq-btn {
            width: 100%;
            // padding: 10px 0;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            div {
                width: 58px;
                height: 25px;
                margin: 0 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 6px;
                background: rgba(95, 122, 190, 0.6);
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

                a {
                    display: block;
                    width: 53px;
                    height: 18px;
                    line-height: 18px;
                    color: #fff;
                    text-align: center;
                    border-radius: 6px;
                    font-size: 12px;
                    background: rgba(95, 122, 190, 1);
                    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                    .icon {
                        margin-right: 5px;
                        font-size: 12px;
                    }
                    &:hover {
                        background: rgba(134, 160, 226, 0.5);
                    }
                }
                // &:last-child {
                //     background: rgba(236, 128, 141, 0.6);
                //     a {
                //         display: block;
                //         width: 53px;
                //         height: 18px;
                //         line-height: 18px;
                //         color: #fff;
                //         text-align: center;
                //         border-radius: 6px;
                //         font-size: 12px;
                //         background: rgba(236, 128, 141, 1);
                //         box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                //         &:hover {
                //             background: rgb(238, 143, 154, 0.5);
                //         }
                //     }
                // }
            }
        }
    }
}
</style>